<template>
  <div class="main-container" id="content">
    <div class="main-content">
      <div class="top-content">
        <div class="top-configuration" @click="handleConfiguration">表头配置</div>
        <div class="top-name">内部转移单</div>
        <div class="top-history" @click="handleHistory">内部转移记录</div>
      </div>
      <div class="btns">
        <el-form ref="searchForm" :inline="true" :model="searchForm" class="form">
          <el-form-item label="">
            <el-cascader
              v-model="searchForm.companyId"
              placeholder="请选择公司名称"
              :options="companyArray"
              :popper-append-to-body="false"
              :props="{
                checkStrictly: true,
                value: 'id',
                label: 'name',
                children: 'childList',
              }"
              @change="changeTreeItem"
              clearable
            ></el-cascader>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="searchForm.baseId" placeholder="请选择基地名称" @change="baseChange" :popper-append-to-body="false" clearable>
              <el-option v-for="item in baseArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button class="el-icon-s-home" @click="back()"></el-button>
      </div>
      <div class="bottom-content">
        <div class="left">
          <div class="head">
            <div class="out">
              转出
              <img class="icon" src="../../../assets/transfer/out.png" alt="" />
            </div>
            <div class="block"></div>
          </div>
          <el-button class="add" type="primary" @click="handleBind(1)">绑定转出鱼池</el-button>
          <div class="auto-box">
            <div class="item" v-for="(item, index) in outFishpondArray" :key="index" @click="handleOut(item, index)" :style="activeIndexO == index ? 'background: #FFD953;' : ''">
              {{ item.outFishpondName }}
            </div>
          </div>
        </div>
        <div class="right">
          <div class="head">
            <div class="block"></div>
            <div class="out">
              <img class="icon" src="../../../assets/transfer/in.png" alt="" />
              转入
            </div>
          </div>
          <el-button class="add" type="primary" @click="handleBind(0)">绑定转入鱼池</el-button>
          <div class="auto-box">
            <div class="item" v-for="(item, index) in inFishpondArray" :key="index" @click="handleIn(item, index)" :style="activeIndexI == index ? 'background: #47B0FE;' : ''">
              {{ item.inFishpondName }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <Operation :companyId="companyId" :baseId="baseId" :outFishpondId="searchForm.outFishpondId" :inFishpondId="searchForm.inFishpondId" :operationIsDialog="operationIsDialog" :selectOutFishpondName="selectOutFishpondName" :selectInFishpondName="selectInFishpondName"></Operation>
    <BindFishpond :bindIsDialog="bindIsDialog" :companyId="companyId" :baseId="baseId" :inOutType="inOutType"></BindFishpond>
    <Configuration :baseId="baseId" :configurationIsDialog="configurationIsDialog"></Configuration>
  </div>
</template>
<script>
import { isFullscreen } from "@/utils/fullscreen";
import Operation from "./components/operation.vue";
import BindFishpond from "./components/bindFishpond.vue";
import Configuration from "./components/configuration.vue";
import { getCompanyInfoTree } from "@/api/company";
import { getSysCompanyBases } from "@/api/system";
import { getDataHisFishpondUserSearch } from "@/api/transfer";

export default {
  components: {
    Operation,
    BindFishpond,
    Configuration,
  },
  data() {
    return {
      // 查询字段
      searchForm: {
        userType: "",
        baseId: "",
        inFishpondId: "",
        fishpondId: "",
        outFishpondId: "",
      },
      inOutType: 0, // 点击绑定类型
      outFishpondIds: "", // 转出鱼池ids(保存时)
      inFishpondIds: "", // 转入鱼池ids(保存时)
      selectOutFishpondName: "", // 选中转出鱼池名
      selectInFishpondName: "", // 选中转入鱼池名
      outFishpondIdsArr: [], // 转出鱼池ids
      inFishpondIdsArr: [], // 转入鱼池ids
      outFishpondNamesArr: [], // 转出鱼池名称
      inFishpondNamesArr: [], // 转出鱼池名称
      companyArray: [], // 公司集合
      baseArray: [], // 基地集合
      fishpondArray: [], // 鱼池集合
      outFishpondArray: [], //转出鱼池查询集合
      inFishpondArray: [], //转入鱼池查询集合
      companyId: "", // 公司id
      baseId: "", // 基地id
      operationStatus: 0,
      operationIsDialog: false,
      bindIsDialog: false,
      configurationIsDialog: false,
      activeIndexO: -1,
      activeIndexI: -1,
      iFullScreen: true,
    };
  },
  provide() {
    return { closeOperation: this.closeAddEdit };
  },
  mounted() {
    this.userType = Number(window.localStorage.getItem("userType"));
    this.searchForm.userType = this.userType;
    this.getCompanyInfoTree();

    // if (!isFullscreen()) {
    //   let ele = document.body;
    //   if (ele.requestFullscreen) {
    //     ele.requestFullscreen();
    //   } else if (ele.mozRequestFullScreen) {
    //     ele.mozRequestFullScreen();
    //   } else if (ele.webkitRequestFullscreen) {
    //     ele.webkitRequestFullscreen();
    //   } else if (ele.msRequestFullscreen) {
    //     ele.msRequestFullscreen();
    //   }
    // }
  },
  methods: {
    // 返回
    back() {
      this.$router.push({
        path: `/workbench/workbench`,
      });
    },
    getCompanyInfoTree() {
      if (!this.searchForm.userType) {
        return;
      }

      if (this.searchForm.userType == 0) {
        // 超级管理员，公司只有一个总公司
        this.companyArray = [
          {
            id: 0,
            name: "总公司",
            parentId: 0,
          },
        ];
      } else {
        getCompanyInfoTree({ id: 0 }).then((res) => {
          if (res.code == 200) {
            this.companyArray = res.data;
            if (res.data.length > 0) {
              this.searchForm.companyId = res.data[0].id;
              this.companyId = this.searchForm.companyId + "";
              this.getSysCompanyBases();
            }
          }
        });
      }
    },
    changeTreeItem(val) {
      if (val) {
        this.searchForm.companyId = val[val.length - 1];
        this.companyId = val[val.length - 1] + "";
      } else {
        this.searchForm.companyId = "";
        this.companyId = "";
      }

      this.searchForm.baseId = "";
      this.baseId = "";
      this.baseArray = [];

      // 获取基地列表
      this.getSysCompanyBases();
    },
    getSysCompanyBases() {
      if (this.searchForm.companyId === "" || this.searchForm.companyId == null) {
        return;
      }
      getSysCompanyBases({ id: this.searchForm.companyId }).then((res) => {
        if (res.code == 200) {
          this.baseArray = res.data;
          if (res.data.length > 0) {
            this.searchForm.baseId = res.data[0].id;
            this.baseId = this.searchForm.baseId + "";
            this.getList();
          }
        }
      });
    },
    // 基地下拉切换
    baseChange(val) {
      if (val) {
        this.searchForm.baseId = val;
        this.baseId = val + "";
      } else {
        this.searchForm.baseId = "";
        this.baseId = "";
      }

      this.getList();
    },
    // 详情
    getList() {
      getDataHisFishpondUserSearch({ companyId: this.searchForm.companyId, baseId: this.searchForm.baseId }).then((res) => {
        if (res.code == 200) {
          this.outFishpondIdsArr = res.data.outFishpondIds ? res.data.outFishpondIds.split(",") : [];
          this.inFishpondIdsArr = res.data.inFishpondIds ? res.data.inFishpondIds.split(",") : [];
          this.outFishpondNamesArr = res.data.outFishpondNames ? res.data.outFishpondNames.split(",") : [];
          this.inFishpondNamesArr = res.data.inFishpondNames ? res.data.inFishpondNames.split(",") : [];
          this.outFishpondArray = this.outFishpondNamesArr.map((outFishpondName, i) => ({ outFishpondName, id: this.outFishpondIdsArr[i] }));
          this.inFishpondArray = this.inFishpondNamesArr.map((inFishpondName, i) => ({ inFishpondName, id: this.inFishpondIdsArr[i] }));
        }
      });
    },
    // 弹窗操作
    handleOut(item, index) {
      this.activeIndexO = index;
      this.searchForm.outFishpondId = item.id + "";
      this.selectOutFishpondName = item.outFishpondName;
    },
    // 弹窗操作
    handleIn(item, index) {
      this.activeIndexI = index;
      if (this.activeIndexO !== -1) {
        if (this.searchForm.outFishpondId == item.id) {
          this.$notify.error({
            title: "操作失败",
            message: "同一个鱼池不能进行转入操作！",
          });
          this.activeIndexO = -1;
          this.activeIndexI = -1;
        } else {
          this.searchForm.inFishpondId = item.id + "";
          this.selectInFishpondName = item.inFishpondName;
          this.operationIsDialog = true;
        }
      }
    },
    // 绑定鱼池
    handleBind(v) {
      this.inOutType = v;
      this.bindIsDialog = true;
    },
    // 绑定弹窗关闭
    closeBind() {
      this.bindIsDialog = false;
    },
    // 表头配置
    handleConfiguration() {
      this.configurationIsDialog = true;
    },
    // 表头配置关闭
    closeConfiguration() {
      this.configurationIsDialog = false;
    },
    // 内部转移记录
    handleHistory() {
      this.$router.push({
        path: `/transfer/history`,
        query: {
          companyId: this.searchForm.companyId,
          baseId: this.searchForm.baseId,
          type: this.$route.query.type,
        },
      });
    },
    // 弹窗关闭
    closeAddEdit() {
      this.operationIsDialog = false;
      this.activeIndexO = -1;
      this.activeIndexI = -1;
    },
  },
};
</script>
<style lang="less" scoped>
/*滚动条整体样式*/
::-webkit-scrollbar {
  width: 0.59rem;
  height: 8.93rem;
}

/*滚动条里面小方块*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #d9d9d9;
}

/*滚动条里面轨道*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #ededed;
}

* {
  box-sizing: content-box;
}

.main-container {
  background-color: #045cad;
  padding: 1rem 0 1.5rem 0;

  .main-content {
    min-height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .top-content {
      width: 95%;
      height: 5rem;
      margin-bottom: 2rem;
      color: #ffffff;
      display: flex;
      justify-content: center;
      font-family: "宋体";
      position: relative;
      position: relative;
      .top-name {
        font-size: 2.59rem;
        font-weight: 900;
      }
      .top-configuration {
        width: fit-content;
        height: 3rem;
        position: absolute;
        left: 30rem;
        margin-left: 5.71rem;
        margin-top: 1rem;
        text-decoration: underline;
        font-size: 1.86rem;
        font-weight: bold;
        cursor: pointer;
      }
      .top-history {
        width: fit-content;
        height: 3rem;
        position: absolute;
        right: 30rem;
        margin-left: 5.71rem;
        margin-top: 1rem;
        text-decoration: underline;
        font-size: 1.86rem;
        font-weight: bold;
        cursor: pointer;
      }
    }

    .btns {
      width: 95%;
      height: 3.5rem;
      margin-bottom: 5rem;
      // border: 1px solid red;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // border: 1px solid red;
      /deep/.el-button {
        font-size: 2.5rem;
      }
      .form {
        /deep/.el-form-item__content {
          width: 23rem;
        }
        /deep/.el-form-item {
          margin-bottom: 0;
        }
        /* selecte 框的高度设置，默认是 40px*/
        /deep/ .el-input__inner {
          height: 4.5rem;
          width: 23rem;
          font-size: 2.16rem;
          // padding-left: 2rem;
        }
        ::v-deep .el-select-dropdown__item {
          font-size: 2.16rem;
          height: 5.028571rem;
          line-height: 5.028571rem;
        }
        ::v-deep .el-input--small .el-input__inner {
          height: 4rem;
          width: 10rem !important;
          font-size: 1.3rem;
          text-align: center;
          padding: 0;
        }
      }
    }

    .bottom-content {
      width: 95%;
      display: flex;
      justify-content: space-between;

      .left {
        width: 48.5%;
        height: 55.57rem;
        background: #ffffff;
        border-radius: 0 0.43rem 0.43rem 0.43rem;
        display: flex;
        position: relative;

        .head {
          width: 13rem;
          height: 3.5rem;
          // border: 1px solid red;
          position: absolute;
          top: -3.3rem;
          left: 0;
          display: flex;

          .out {
            width: 9.5rem;
            height: 3.5rem;
            padding-left: 2rem;
            background: #ffffff;
            border-radius: 0.43rem 0.43rem 0 0;
            display: flex;
            align-items: center;
            font-size: 1.86rem;
            font-family: "宋体";
            font-weight: bold;

            // line-height: 3rem;
            .icon {
              width: 1.71rem;
              height: 1.71rem;
              margin-left: 0.61rem;
            }
          }

          .block {
            width: 3.5rem;
            height: 3.5rem;
            margin-left: -0.5rem;
            background: linear-gradient(60deg, #ffffff, #ffffff 50%, transparent 50%, transparent 100%);
          }
        }

        .add {
          height: 2rem;
          width: 10rem;
          width: 11rem;
          // border: 1px solid red;
          position: absolute;
          top: 0.3rem;
          left: 1rem;
          font-size: 1.86rem;
          display: flex;
        }

        .auto-box {
          width: 98%;
          height: fit-content;
          margin-top: 5.5rem;
          max-height: 93%;
          // border: 1px solid red;
          display: flex;
          flex-flow: wrap;
          // justify-content: space-around;
          overflow: auto;

          .item {
            width: 10.5rem;
            height: 10.5rem;
            line-height: 10.5rem;
            margin-left: 3rem;
            margin-right: 1rem;
            margin-bottom: 2rem;
            color: #333333;
            font-size: 1.86rem;
            border-radius: 50%;
            border: 0.25rem solid #979797;
            text-align: center;
            cursor: pointer;
          }
        }
      }

      .right {
        width: 48.5%;
        height: 55.57rem;
        box-sizing: content-box;
        background: #ffffff;
        border-radius: 0.43rem 0 0.43rem 0.43rem;
        display: flex;
        position: relative;

        .head {
          width: 13rem;
          height: 3.5rem;
          // border: 1px solid red;
          position: absolute;
          top: -3.3rem;
          right: 0;
          display: flex;

          .out {
            width: 9.5rem;
            height: 3.5rem;
            padding-right: 2rem;
            background: #ffffff;
            border-radius: 0.43rem 0.43rem 0 0;
            display: flex;
            align-items: center;
            font-size: 1.86rem;
            font-family: "宋体";
            font-weight: bold;

            .icon {
              width: 1.71rem;
              height: 1.71rem;
              margin-left: 2rem;
              margin-right: 0.61rem;
            }
          }

          .block {
            width: 3.5rem;
            height: 3.5rem;
            margin-right: -0.5rem;
            background: linear-gradient(300deg, #ffffff, #ffffff 50%, transparent 50%, transparent 100%);
          }
        }

        .add {
          height: 2rem;
          width: 11rem;
          font-size: 1.86rem;
          // border: 1px solid red;
          position: absolute;
          top: 0.3rem;
          right: 1rem;
          display: flex;
        }

        .auto-box {
          width: 98%;
          height: fit-content;
          max-height: 93%;
          margin-top: 5rem;
          // border: 1px solid red;
          display: flex;
          flex-flow: wrap;
          // justify-content: space-around;
          overflow: auto;

          .item {
            width: 10.5rem;
            height: 10.5rem;
            line-height: 10.5rem;
            margin-left: 3rem;
            margin-right: 1rem;
            margin-bottom: 2.15rem;
            color: #333333;
            font-size: 1.86rem;
            border-radius: 50%;
            border: 0.25rem solid #979797;
            text-align: center;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
